<!-- 留存 此页面用于在小程序获取用户头像和用户名 -->
<template>
	<div class="userInfo">
		<div class="avatar">
			<button class="button" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"></button>
			<image class="image" v-if="!avatar" key="default" src="/pages/login/img/user-filling.png" mode="aspectFit"></image>
			<image class="avatar-image" v-else key="user" :src="avatar" mode="aspectFill"></image>
		</div>

		<div class="form-item">
			<div class="label">昵称</div>
			<div class="value">
				<input
					class="input wxnickname"
					:adjust-position="false"
					type="nickname"
					placeholder="请输入昵称"
					v-model="username"
					@input="onUsernameInput"
					@focus="onUsernameFocus"
					@blur="onUsernameBlur"
				/>
				<div @click="onClearUsername" class="clearable" v-show="!clearableHidden"></div>
			</div>
		</div>

		<button class="submit" type="primary" @click="onSubmit">确定</button>
	</div>
</template>

<script>
import mixin from "@/mixin"
import { backend } from "@/uni"
import request from "@/uni/request"

export default {
	name: "userInfo",
	mixins: [mixin],
	data() {
		return {
			avatar: "",
			username: "",
			clearableHidden: true,
			code: "",
		}
	},
	computed: {},
	onLoad() {
		this.getCode()
	},
	methods: {
		async getCode() {
			const [error, { code }] = await uni.login({
				provider: "weixin",
				scopes: "auth_base",
			})
			if (error) {
				uni.showToast({
					title: "获取用户code失败",
					icon: "error",
				})
				return
			}
			this.code = code
		},

		async onChooseAvatar({ detail: { avatarUrl: filePath } }) {
			uni.showLoading({
				title: "上传中",
			})
			try {
				const [error, { data }] = await uni.uploadFile({
					url: backend + "/system/oss/upload", //仅为示例，非真实的接口地址
					filePath,
					name: "upfile",
				})
				if (error) {
					throw new Error(error)
				}
				const result = JSON.parse(data || "{}")
				if (result.code != 0) {
					throw new Error(result.msg)
				}
				this.avatar = result.data.url
				uni.hideLoading()
			} catch (error) {
				uni.hideLoading()
				uni.showToast({
					title: error,
					icon: "error",
				})
			}
		},

		onClearUsername() {
			this.username = ""
		},
		onUsernameInput() {
			this.onUsernameFocus()
		},
		onUsernameFocus() {
			this.clearableHidden = !this.username
		},
		onUsernameBlur(e) {
			this.clearableHidden = true
		},

		async onSubmit() {
			try {
				uni.createSelectorQuery()
					.in(this)
					.select(".wxnickname")
					.fields({
						properties: ["value"],
					})
					.exec(async res => {
						if (res?.[0]?.value != this.username) {
							this.username = res?.[0]?.value
						}

						if (!this.avatar) {
							uni.showToast({
								title: "请上传头像",
								icon: "error",
							})
							return
						}
						if (!this.username) {
							uni.showToast({
								title: "请输入昵称",
								icon: "error",
							})
							return
						}
						const result = await request("post", backend + "/wxAppLogin", {
							avatar: this.avatar,
							username: this.username,
							code: this.code,
						})
						if (result.code == 3000) {
							uni.showToast({
								title: "请先绑定手机号",
								icon: "error",
							})
							setTimeout(() => {
								this.toPage("/pages/login/get-mobile?unionid=" + result.unionid)
							}, 1500)
							return
						}
						const { token, refreshToken } = result.data
						uni.setStorageSync("token", token)
						uni.setStorageSync("refreshToken", refreshToken)
						uni.showToast({
							title: "登录成功",
							icon: "success",
						})
						setTimeout(() => {
							this.toPage(-1)
						}, 1500)
					})
			} catch (error) {
				uni.showToast({
					title: "接口错误",
					icon: "error",
				})
			}
		},
	},
	components: {},
}
</script>

<style lang="scss" scoped>
.userInfo {
	padding-top: 55rpx;
	.avatar {
		width: 150rpx;
		height: 150rpx;
		border-radius: 15rpx;
		margin: auto;
		margin-bottom: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #f4f4f6;
		position: relative;
		overflow: hidden;
		.image {
			width: calc(150rpx * 0.7);
			height: calc(150rpx * 0.7);
			display: block;
		}
		.avatar-image {
			width: 100%;
			height: 100%;
			display: block;
		}
		.button {
			position: absolute;
			z-index: 5;
			opacity: 0;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
		}
	}

	.form-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 80rpx;
		border-top: 1rpx solid #f4f4f6;
		border-bottom: 1rpx solid #f4f4f6;
		padding: 0 50rpx;
		.label {
			white-space: nowrap;
			font-size: 26rpx;
			margin-right: 20rpx;
		}
		.value {
			flex: 1;
			position: relative;
			.input {
				width: 100%;
				height: 100%;
				font-size: 26rpx;
				padding: 0 20rpx;
				border: none;
				outline: none;
			}
			.clearable {
				background: #b2b2b2;
				width: 35rpx;
				height: 35rpx;
				border-radius: 50%;
				position: absolute;
				top: 0;
				bottom: 0;
				right: 15rpx;
				margin: auto;
				z-index: 9;
				&::before,
				&::after {
					content: "";
					display: block;
					width: 2rpx;
					height: 20rpx;
					background: #fff;
					position: absolute;
					top: 0;
					bottom: 0;
					right: 0;
					left: 0;
					margin: auto;
				}
				&::before {
					transform: rotate(45deg);
				}
				&::after {
					transform: rotate(-45deg);
				}
			}
		}
	}
}
.submit {
	width: 350rpx;
	height: 80rpx;
	position: fixed;
	bottom: 250rpx;
	right: 0;
	left: 0;
	margin: auto;
	margin-top: 200rpx;
}
</style>
